(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
  typeof define === 'function' && define.amd ? define(factory) :
  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.CharacterSelector = factory());
})(this, (function () { 'use strict';

  // Vue依赖（需要在使用环境中提供Vue）
  const { ref, defineEmits, defineExpose, createApp, defineComponent } = Vue;

  // 下标字符
  const subscripts = {
    '0': '₀', '1': '₁', '2': '₂', '3': '₃', '4': '₄',
    '5': '₅', '6': '₆', '7': '₇', '8': '₈', '9': '₉',
    '+': '₊', '-': '₋', '=': '₌', '(': '₍', ')': '₎',
    'a': 'ₐ', 'e': 'ₑ', 'o': 'ₒ', 'x': 'ₓ',
    'h': 'ₕ', 'k': 'ₖ', 'l': 'ₗ', 'm': 'ₘ', 'n': 'ₙ',
    'p': 'ₚ', 's': 'ₛ', 't': 'ₜ'
  };

  // 上标字符
  const superscripts = {
    '0': '⁰', '1': '¹', '2': '²', '3': '³', '4': '⁴',
    '5': '⁵', '6': '⁶', '7': '⁷', '8': '⁸', '9': '⁹',
    '+': '⁺', '-': '⁻', '=': '⁼', '(': '⁽', ')': '⁾',
    'A': 'ᴬ', 'B': 'ᴮ', 'D': 'ᴰ', 'E': 'ᴱ', 'G': 'ᴳ',
    'H': 'ᴴ', 'I': 'ᴵ', 'J': 'ᴶ', 'K': 'ᴷ', 'L': 'ᴸ',
    'M': 'ᴹ', 'N': 'ᴺ', 'O': 'ᴼ', 'P': 'ᴾ', 'R': 'ᴿ',
    'T': 'ᵀ', 'U': 'ᵁ', 'V': 'ⱽ', 'W': 'ᵂ'
  };

  // 常用字符
  const commonChars = [
    '₂', '¹', '⁰', '⁴', '⁺', '⁻', '₌', '₍', '₎',
    '₀', '₅', '₃', '₄', '₊', '₌', '₍', '₎',
    '℃', '℉', '°', '±', '×', '÷', '√', '∞',
    'α', 'β', 'γ', 'δ', 'ε', 'θ', 'λ', 'μ', 'π', 'σ', 'φ', 'ω'
  ];

  // 样式字符串
  const styles = `
    .character-selector {
      font-family: Arial, sans-serif;
    }
    .character-grid {
      display: grid;
      grid-template-columns: repeat(10, 1fr);
      gap: 8px;
      margin: 15px 0;
      max-height: 300px;
      overflow-y: auto;
    }
    .char-button {
      height: 36px;
      font-size: 14px;
      padding: 6px;
      width: 36px;
      background-color: #ffffff;
      border: 1px solid #dcdfe6;
      border-radius: 4px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s;
      box-sizing: border-box;
    }
    .char-button:hover {
      background-color: #ecf5ff;
      border-color: #409eff;
      color: #409eff;
    }
    .char-button:first-child {
      margin-left: 12px;
    }
    .selected-characters {
      margin-top: 20px;
    }
    .tabs {
      margin-bottom: 20px;
    }
    .tab-content {
      min-height: 350px;
    }
    .tab-pane {
      display: none;
    }
    .tab-pane.active {
      display: block;
    }
    .tab-buttons {
      display: flex;
      border-bottom: 1px solid #dcdfe6;
      margin-bottom: 15px;
    }
    .tab-button {
      padding: 10px 20px;
      cursor: pointer;
      border: 1px solid transparent;
      border-bottom: none;
      background: none;
    }
    .tab-button.active {
      border-color: #dcdfe6;
      border-bottom-color: #ffffff;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
    }
    .input-group {
      display: flex;
    }
    .input-group input {
      flex: 1;
      padding: 10px;
      border: 1px solid #dcdfe6;
      border-radius: 4px 0 0 4px;
    }
    .input-group button {
      padding: 10px 15px;
      background-color: #409eff;
      color: white;
      border: none;
      border-radius: 0 4px 4px 0;
      cursor: pointer;
    }
    .input-group button:hover {
      background-color: #66b1ff;
    }
  `;

  // 字符选择器组件
  const CharacterSelectorComponent = defineComponent({
    name: 'CharacterSelector',
    template: `
      <div class="character-selector">
        <div class="tabs">
          <div class="tab-buttons">
            <button 
              class="tab-button" 
              :class="{ active: activeTab === 'subscript' }"
              @click="activeTab = 'subscript'"
            >
              下标字符
            </button>
            <button 
              class="tab-button" 
              :class="{ active: activeTab === 'superscript' }"
              @click="activeTab = 'superscript'"
            >
              上标字符
            </button>
            <button 
              class="tab-button" 
              :class="{ active: activeTab === 'common' }"
              @click="activeTab = 'common'"
            >
              常用字符
            </button>
          </div>
          
          <div class="tab-content">
            <!-- 下标字符标签页 -->
            <div class="tab-pane" :class="{ active: activeTab === 'subscript' }">
              <div class="character-grid">
                <button
                  v-for="(char, key) in subscripts"
                  :key="'sub_' + key"
                  @click="selectCharacter(char)"
                  class="char-button"
                >
                  {{ char }}
                </button>
              </div>
            </div>
            
            <!-- 上标字符标签页 -->
            <div class="tab-pane" :class="{ active: activeTab === 'superscript' }">
              <div class="character-grid">
                <button
                  v-for="(char, key) in superscripts"
                  :key="'sup_' + key"
                  @click="selectCharacter(char)"
                  class="char-button"
                >
                  {{ char }}
                </button>
              </div>
            </div>
            
            <!-- 常用字符标签页 -->
            <div class="tab-pane" :class="{ active: activeTab === 'common' }">
              <div class="character-grid">
                <button
                  v-for="(char, index) in commonChars"
                  :key="'common_' + index"
                  @click="selectCharacter(char)"
                  class="char-button"
                >
                  {{ char }}
                </button>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 底部输入框 -->
        <div class="selected-characters">
          <div class="input-group">
            <input
              v-model="selectedChars"
              placeholder="选中的字符将显示在这里"
              readonly
            />
            <button @click="copyToClipboard">复制</button>
          </div>
        </div>
      </div>
    `,
    setup(props, { emit }) {
      // 响应式数据
      const activeTab = ref('subscript');
      const selectedChars = ref('');

      // 选择字符方法
      const selectCharacter = (char) => {
        selectedChars.value += char;
        // 显示消息（如果环境中支持）
        if (typeof ElMessage !== 'undefined') {
          ElMessage.success(`已选择字符: ${char}`);
        } else {
          console.log(`已选择字符: ${char}`);
        }
      };

      // 复制到剪贴板
      const copyToClipboard = async () => {
        if (!selectedChars.value) {
          if (typeof ElMessage !== 'undefined') {
            ElMessage.warning('没有字符可复制');
          } else {
            console.warn('没有字符可复制');
          }
          return;
        }

        try {
          await navigator.clipboard.writeText(selectedChars.value);
          if (typeof ElMessage !== 'undefined') {
            ElMessage.success('已复制到剪贴板');
          } else {
            console.log('已复制到剪贴板');
          }
        } catch (err) {
          if (typeof ElMessage !== 'undefined') {
            ElMessage.error('复制失败');
          } else {
            console.error('复制失败', err);
          }
        }
      };

      // 暴露方法给父组件
      const clearSelection = () => {
        selectedChars.value = '';
      };

      const getSelectedChars = () => selectedChars.value;

      const getAndClearSelectedChars = () => {
        const chars = selectedChars.value;
        selectedChars.value = '';
        return chars;
      };

      return {
        activeTab,
        selectedChars,
        subscripts,
        superscripts,
        commonChars,
        selectCharacter,
        copyToClipboard,
        clearSelection,
        getSelectedChars,
        getAndClearSelectedChars
      };
    }
  });

  // 初始化样式
  function initStyles() {
    if (typeof document !== 'undefined' && !document.getElementById('character-selector-styles')) {
      const style = document.createElement('style');
      style.id = 'character-selector-styles';
      style.textContent = styles;
      document.head.appendChild(style);
    }
  }

  // 创建并挂载组件的函数
  function createCharacterSelector(container, options = {}) {
    initStyles();
    
    if (typeof container === 'string') {
      container = document.querySelector(container);
    }
    
    if (!container) {
      throw new Error('Container element not found');
    }
    
    // 清空容器
    container.innerHTML = '';
    
    // 创建应用实例
    const app = createApp(CharacterSelectorComponent);
    
    // 挂载应用
    const instance = app.mount(container);
    
    return instance;
  }

  // 返回公共API
  return {
    createCharacterSelector,
    CharacterSelectorComponent,
    subscripts,
    superscripts,
    commonChars,
    initStyles
  };

}));